<template>
  <div>
    <div class="xcpcHistogram">
      <div class="chartsHistogram" ref="chartsHistogram"></div>
      <div
        class="showItem_1"
        :style="item.num === 0 ? 'pointer-events:none' : ''"
        v-for="(item, index) in cookie" :key="index" @click="jumpList(item)">
        <div class="oneRow">
          <div class="colorShow_1" :style="`background-color: ${colorList[index]}`"></div>
          <div class="textShow">{{ item.name }}</div>
        </div>
        <div class="oneRow">
          <div class="moreText">
            {{ (item.percent*100).toFixed(2) }}%({{ item.num }}次)
          </div>
        </div>
      </div>
    </div>
    <div class="column-pdd"></div>
    <div class="menPhis-column">
      <div class="column-box">
        <div class="column-box-title">
          <span style="margin-left: 5px;">巡查排查走势</span>
        </div>
      </div>
      <div class="column" ref="brokenLine"></div>
      <div class="column-pdd"></div>
    </div>
    <div class="menPhis-list" v-if="dataList.length > 0">
      <div
        class="column-box list-box"
        :style="item.num === 0 ? 'pointer-events:none' : ''"
        v-for="(item, index) in dataList"
        :key="index"
        @click="jump(item)">
        <span class="">{{ item.name }}</span>
        <span>{{ item.num }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: 'field',
  data () {
    return {
      colorList: [ '#228BFF', '#1DC8FF', '#FFD648', '#5EFF97', '#007022']
    }
  },
  props: {
    cookie: {
      type: Array,
      default: () => []
    },
    brokenLine: {
      type: Array,
      default: () => []
    },
    date: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    },
  },
  watch: {
    cookie () {
      this.column();
      this.dateB();
    },
    brokenLine () {
      this.column();
      this.dateB();
    },
    dataList () {
      this.column();
      this.dateB();
    }
  },
  methods: {
    //  柱状图数据
    column () {
      const myChart = echarts.init(this.$refs.chartsHistogram);
      const myCharts = echarts.init(this.$refs.brokenLine);
      let option = {
        // title: {
        //   text: '巡查排查总数',
        //   left: 'left',
        //   textStyle:{
        //     fontSize: 16
        //   },
        // },
        color : this.colorList,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['25%', '45%'],
            avoidLabelOverlap: false,
            labelLine: {
              show: false
            },
            data: this.dateB()
          }
        ]
      };
      let data = {
        color: ['#3398DB'],
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '7%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          default: false,
          data: this.date,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#535353',
              fontSize: 12,
            },
          }
        },
        yAxis: [
          {
            name: '次',
            type: 'value',
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false
            },
            minInterval: 2,
          }
        ],
        dataZoom: [
          {
            roam: false,
            zoomOnMouseWheel: false,
            type: 'inside',
            xAxisIndex: [0],
            start: this.dateLocation().start,
            // end: this.date.length < 12 ? 27 : 50
            end: this.dateLocation().end
          }
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            barWidth: '40%',
            data: this.brokenLine,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      myCharts.setOption(data);
    },
    //  饼状数据
    dateB () {
      let arr = [];
      this.cookie.map(item => {
        arr.push((item.percent*100).toFixed(2))
      })
      return arr;
    },
    //  折线图定位
    dateLocation () {
      let month = {
        start: 0,
        end: 0
      };
      if (this.date.length <= 12) {
        month.start = (100/12)*(new Date().getMonth() + 1 - 6)
        month.end = (100/12)*(new Date().getMonth() + 1)
      } else {
        month.start = (100/30)*(new Date().getDate() - 7)
        month.end = (100/30)*(new Date().getDate() - 1)
      }
      return month
    },
    //  人员跳转列表
    jump (data) {
      this.$emit('jump', data);
    },
    //  饼状图跳转列表
    jumpList (data) {
      this.$emit('jumpList', data);
    }
  }
}
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }
  .xcpcHistogram{
    position: relative;
  }
  .chartsHistogram{
    height: 6rem;
    padding: 0.05rem;
    margin-top: 0.1rem;
  }
  .showItem_1 {
    position: absolute;
    font-size: 0.35rem;
  }
  .showItem_1:nth-child(2n) {
    left: 0.5rem;
  }
  .showItem_1:nth-child(2n - 1) {
    left: 6.7rem;
  }
  .showItem_1:nth-child(2){
    top: 1rem;
  }
  .showItem_1:nth-child(3){
    top: 1rem;
  }
  .showItem_1:nth-child(4){
    top: 3rem;
  }
  .showItem_1:nth-child(5){
    top: 3rem;
  }
  .showItem_1:nth-child(6){
    top: 4.7rem;
  }
  .colorShow_1{
    width: 0.15rem;
    height: 0.45rem;
    border-radius: 5px;
  }
  /*.showItem_1:nth-child(2) .color {*/
  /*  background-color: #228BFF;*/
  /*}*/
  /*.showItem_1:nth-child(3) .color {*/
  /*  background-color: #1DC8FF;*/
  /*}*/
  /*.showItem_1:nth-child(4) .color {*/
  /*  background-color: #FFD648;*/
  /*}*/
  /*.showItem_1:nth-child(5) .color {*/
  /*  background-color: #5EFF97;*/
  /*}*/
  /*.showItem_1:nth-child(6) .color {*/
  /*  background-color: #007022;*/
  /*}*/
  .textShow{
    font-size: 0.3889rem;
    margin-left: 0.3rem;
  }
  .oneRow{
    display: flex;
    margin: 0.1rem 0;
  }
  .moreText{
    color: #8E8E8E;
    margin-left: 0.4rem;
  }
  .menPhis-column {
    padding: 0.185rem 0;
  }
  .column {
    width: 100%;
    height: 4.62963rem;
  }
  .column-pdd {
    padding: 0.185185rem 0;
    background-color: #F2F2F2;
  }
  .menPhis-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .list-box {
    position: relative;
    width: 50%;
    border-bottom: 1Px solid #F2F2F2;
    padding: 0.277778rem 0.37037rem;
  }
  .list-box:nth-child(2n - 1):after {
    content: '';
    position: absolute;
    right: 0;
    height: 100%;
    width: 1Px;
    top: 0;
    background-color: #F2F2F2;
  }
  .column-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
